<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>修真聊天群</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" th:href="@{/images/comment.png}" />
    <link rel="stylesheet" type="text/css" media="screen" th:href="@{/css/normalize.css}" />
    <link rel="stylesheet" type="text/css" media="screen" th:href="@{/css/modal.css}" />
    <link rel="stylesheet" type="text/css" media="screen" th:href="@{/css/chatroom.css}" />
    <script th:src="@{/js/jquery-3.1.1.min.js}"></script>
    <script th:src="@{/js/modal.js}"></script>
    <script th:src="@{/js/chatroom.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
</head>
<body>
    <!-- 修改密码模态框（Modal） -->
    <div class="modal fade" id="changeKey" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改密码</h4>
                </div>
                <form onsubmit="return checkPassword()">
                    <div class="modal-body">
                        <div class="changeKey">
                            <span>原密码：</span><input type="password" id="password">
                        </div>
                        <div class="changeKey">
                            <span>新密码：</span><input type="password" id="newPassword">
                        </div>
                        <span id="errorp"></span>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="提交更改">
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="changeName" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">修改昵称</h4>
                </div>
                <form onsubmit="return checkUsername()">
                    <div class="modal-body">
                        <div class="newNickName">
                            <span>新昵称：</span><input id="nickname" type="text" name="nickname">
                            <span id="error"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="提交更改">
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div class="bg">

    </div>
    <div class="chatBody">
        <div class="nav">
            <span class="title">修真聊天群</span>
            <ul>
                <li class="menu" id="exit"><a href="/logout">离开</a></li>
                <li class="menu"><a href="#2" data-toggle="modal" data-target="#changeKey">修改密码</a></li>
                <li class="menu"><a href="#3" data-toggle="modal" data-target="#changeName">修改昵称</a></li>
                <li class="menu" id="nickMenu"><span class="nickName" th:text="${nickname}" th:data-role="${role}">张三</span></li>
            </ul>
        </div>
        <div class="container">
            <div class="left">

        </div>
        <div class="right">
            <div class="title2">
                群公告：<span class="tip">富强、民主、文明、和谐，自由、平等、公正、法治， 爱国、敬业、诚信、友善。</span>
            </div>
            <div class="msgContainer">

                <div class="msg" th:if="${historyMessages.size() != 0}" th:each="historyMessage : ${historyMessages}">
                    <span class="fromUser" th:text="${historyMessage.getFromNickname()}">张三</span>
                    <span class="smile" th:if="${historyMessage.getEmotion()!=null}" th:text="${historyMessage.getEmotion()}">微笑着</span>
                    对<span class="toUser" th:text="${historyMessage.getToNickname() == null ? '大家' : historyMessage.getToNickname()}">李四</span>说：
                    <span class="content" th:text="${historyMessage.getContent()}">content</span>
                    <span class="date" th:text="${historyMessage.getDate().toString().replace('.0','')}"> 2018-12-17 15:42</span>
                </div>
                <!--<div class="msg">-->
                    <!--<span class="fromUser">张三</span><span class="smile">微笑着</span>对<span class="toUser">李四</span>说：<span class="content">content</span><span class="date">2018-12-17 15:42</span>-->
                <!--</div>-->
            </div>
            <div class="talk">
                <div class="talk1">
                    To
                </div>
                <div class="talk2">
                    <input type="text" id="userInput" placeholder="所有人">
                    <a href="##1" id="userTrigger" onclick='asd("asd","asd")'></a>
                </div>
                <div class="talk3">
                    <textarea id="contentInput" placeholder="说些什么......" ></textarea>
                    <a href="##2" id="contentTrigger"></a>
                </div>
                <div class="talk4">
                    <div id="emojies">
                        <div class="emoji">
                                微笑着
                            </div>
                            <div class="emoji">
                                神秘兮兮地
                            </div>
                            <div class="emoji">
                                微笑着
                            </div>
                            <div class="emoji">
                                神秘兮兮地
                            </div>
                            <div class="emoji">
                                微笑着
                            </div>
                            <div class="emoji">
                                神秘兮兮地
                            </div>
                            <div class="emoji">
                                微笑着
                            </div>
                            <div class="emoji">
                                神秘兮兮地
                            </div>
                            <div class="emoji">
                                微笑着
                            </div>
                        </div>
                        <a href="##2" id="emojiTrigger"></a>
                    </div>
                    <div class="talk5">
                        <a href="##2" id="sendTrigger"></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">

        </div>
    </div>
</body>
<script>
    function checkUsername() {
        var nickname = document.getElementById("nickname").value;
        var error = document.getElementById("error");
        error.innerHTML = '';
        if (nickname === "") {
            error.innerHTML = "昵称不能为空";
        } else if (nickname.length > 6) {
            error.innerHTML = "昵称长度不能大于6位";
        } else {
            var data = new FormData();
            data.append("nickname", nickname);
            axios({
                method: 'post',
                url: '/updateNickname',
                data: data,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function (value) {
                var data = value.data;
                console.log(data);
                if (data.code === "0") {
                    error.innerHTML = data.msg;
                } else {
                    location.reload();
                }
            });
        }
        return false;
    }
    function checkPassword() {
        var password = document.getElementById("password").value;
        var newPassword = document.getElementById("newPassword").value;
        var error = document.getElementById("errorp");
        error.innerHTML = '';
        if (newPassword === "") {
            error.innerHTML = "新密码不能为空";
        } else if (newPassword.length < 6 || newPassword.length > 16) {
            error.innerHTML = "新密码长度必须为6-16位";
        } else {
            var data = new FormData();
            data.append("password", password);
            data.append("newPassword", newPassword);
            axios({
                method: 'post',
                url: '/updatePassword',
                data: data,
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(function (value) {
                var data = value.data;
                console.log(data);
                if (data.code === "0") {
                    console.log(data);
                    error.innerHTML = data.msg;
                } else {
                    alert(data.msg);
                    location.reload()
                }
            });
        }
        return false;
    }
</script>
</html>